<template>
    <div class="app-container">
        <h3>委托信息</h3>
        <el-form ref="orderCenter" :model="orderCenter" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="委托单号:">
                        <span>{{orderCenter.id}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货主名称:">
                        <span>{{orderCenter.shipperName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货主手机号码:">
                        <span>{{orderCenter.shipperPhone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="公司名称:">
                        <span>{{orderCenter.shipperPartyName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="货物名称:">
                        <span>{{orderCenter.goodsName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物类型:">
                        <span>{{orderCenter.goodsTypeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物体积:">
                        <span>{{orderCenter.goodsVolume}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="货物重量:">
                        <span>{{orderCenter.goodsWeight}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="是否打包:">
                        <span>{{orderCenter.ifPackage}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="装货方式:">
                        <span>{{orderCenter.loadingWay}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="卸货方式:">
                        <span>{{orderCenter.unloadingWay}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起点地址:">
                        <span>{{orderCenter.fromProvinceName}}{{orderCenter.fromCityName}}{{orderCenter.fromCountyName}}{{orderCenter.fromAddressDetail}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="目的地址:">
                        <span>{{orderCenter.toProvinceName}}{{orderCenter.toCityName}}{{orderCenter.toCountyName}}{{orderCenter.toAddressDetail}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="装货时间:">
                        <span>{{orderCenter.loadingBeginTime}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="截至时间:">
                        <span>{{orderCenter.loadingEndTime}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="支付方式:">
                        <span>{{orderCenter.payTypeName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="状态:">
                        <span>{{orderCenter.statusName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建时间:">
                        <span>{{orderCenter.createdDate}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>货物图片</h3>
        <div>
            <div class="block" v-for="orderCenterImage in orderCenterImageList" :key="orderCenterImage.id">
                <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:10px;margin-top:10px"
                     @click="showImg(orderCenterImage.imageUrl)">
                    <img :src="orderCenterImage.imageUrl"
                         style="width:100%;height:100%;"/>
                </div>
            </div>
        </div>
        <h3 style="clear:left">运输信息</h3>
        <div v-if="truckCenterList !=null && truckCenterList.length>0">
            <el-table :data="truckCenterList">
                <el-table-column
                        prop="id"
                        label="运输单号"
                        width="180">
                    <template slot-scope="scope">
                        <a @click="showTruckCenterDetail(scope.row.id)"><span>{{scope.row.id}}</span></a>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="mainDriverName"
                        label="车主名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="mainDriverPhone"
                        label="手机号码">
                </el-table-column>
                <el-table-column
                        prop="plateNumber"
                        label="车牌号">
                </el-table-column>
                <el-table-column
                        prop="truckTypeName"
                        label="车辆类型">
                </el-table-column>
                <el-table-column
                        prop="truckLength"
                        label="车辆长度">
                </el-table-column>
                <el-table-column
                        prop="maxVolume"
                        label="车辆体积">
                </el-table-column>
                <el-table-column
                        prop="maxVolume"
                        label="车辆体积">
                </el-table-column>
            </el-table>
        </div>
        <el-form ref="truckCenter" v-else :model="truckCenter" label-width="120px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="运输单号:">
                        <a @click="showTruckCenterDetail(truckCenter.id)"><span>{{truckCenter.id}}</span></a>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车主名称:">
                        <span>{{truckCenter.mainDriverName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号码:">
                        <span>{{truckCenter.mainDriverPhone}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="身份证号码:">
                        <span>{{truckCenter.mainDriverId}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="车牌号:">
                        <span>{{truckCenter.plateNumber}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆类型:">
                        <span>{{truckCenter.truckTypeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆长度:">
                        <span>{{truckCenter.truckLength}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="车辆体积:">
                        <span>{{truckCenter.maxVolume}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="车辆载重:">
                        <span>{{truckCenter.maxWeight}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="GPS状态:">
                        <span>{{truckCenter.gpsStatus}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起点地址:">
                        <span>{{truckCenter.fromProvinceName}}{{truckCenter.fromCityName}}{{truckCenter.fromCountyName}}{{truckCenter.fromAddressDetail}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="目的地址:">
                        <span>{{truckCenter.toProvinceName}}{{truckCenter.toCityName}}{{truckCenter.toCountyName}}{{truckCenter.toAddressDetail}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="目的地址:">-->
                        <!--<span>{{orderCenter.toProvinceName|orderCenter.toCityName|orderCenter.toCountyName|orderCenter.toAddressDetail}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="装货时间:">-->
                        <!--<span>{{orderCenter.loadingBeginTime}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="截至时间:">-->
                        <!--<span>{{orderCenter.loadingEndTime}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="支付方式:">-->
                        <!--<span>{{orderCenter.payTypeName}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            <!--</el-row>-->
            <!--<el-row>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="状态:">-->
                        <!--<span>{{orderCenter.statusName}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col :span="6">-->
                    <!--<el-form-item label="创建时间:">-->
                        <!--<span>{{orderCenter.createdDate}}</span>-->
                    <!--</el-form-item>-->
                <!--</el-col>-->
            <!--</el-row>-->
        </el-form>


        <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
            <div class="viewImg">
                <img :src="imgUrl" style="width:100%;height: auto">
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import {selectOrderCenterDetail} from '@/api/orderCenterApi';
  export default {
    name: 'detail',
    data(){
      return{
        truckCenterList:[
          {id:'1',mainDriverName:'里斯'},
          {id:'2',mainDriverName:'里斯b'},
        ],
        orderCenter:{},
        orderCenterImageList:[
          {id:'1',imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575334692&di=7f736539d9ed8425da02f883affbe11f&imgtype=jpg&er=1&src=http%3A%2F%2Ffilecdn.suixin8.com%2Fuploads%2F520_10506%2F201907%2Fca4ab5baabd01a726241f2be6980219d.jpg'},
          {id:'2',imageUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575334692&di=7f736539d9ed8425da02f883affbe11f&imgtype=jpg&er=1&src=http%3A%2F%2Ffilecdn.suixin8.com%2Fuploads%2F520_10506%2F201907%2Fca4ab5baabd01a726241f2be6980219d.jpg'},
        ],
        imgUrl:'',
        truckCenter:{id:'1'},
        dialogImgFormVisible:false,
      }
    },
    methods:{
      showTruckCenterDetail(truckCenterId){
        sessionStorage.setItem("truckCenterId",truckCenterId);
        this.$router.push("/truckorder/truckcenterdetail")
      },
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
    },
    mounted() {
      let orderCenterId = sessionStorage.getItem('orderCenterId');
      // sessionStorage.removeItem('orderCenterId')
      selectOrderCenterDetail(orderCenterId).then(response => {
        if (!response.hasError) {
          const { result = {} } = response
          this.orderCenter = result
        }
      })
    }
  }
</script>

<style scoped>

</style>
